<template>
	<div class="products">
		<fade-animation>
			<div class="backlayer" v-if="showBacklayer" @click="handleBackLayerClick"></div>
		</fade-animation>
		<div>
			<ul>
				<li
					v-for="(item,index) in newProductsDate"
					:key="item.id"
					@click.stop="handleItemClick(item.id)"
				>
					<img :src="item.imgUrl" alt />
					<section class="food-info">
						<p class="food-title">{{item.title}}</p>
						<p class="food-details">{{item.desc}} {{item.material}}</p>
						<p class="food-sales">
							<span>
								<!-- 好评星级 -->
								<home-rating :rating="item.rating"></home-rating>
							</span>
							<span>月售{{item.sales}}份</span>
						</p>
						<p class="food-common" v-if="item.rate">
							<span class="food-common-discount">{{item.rate}}折</span>
							<span class="food-common-tips">每单限一份优惠</span>
						</p>
						<p class="food-common-line" v-if="!item.rate"></p>
						<p class="sales-info">
							<span class="sales-info-ico">¥</span>
							<span class="sales-info-price">{{item.price}}</span>
							<span class="sales-info-originPrice" v-if="item.rate">¥{{item.originPrice}}</span>
							<span class="detail-food-cart">
								<img
									class="add"
									@click.stop.self="handleAddClick(item.id)"
									src="http://kxm.pub/shop/images/add.png"
									alt
								/>
								<rotate1-animation>
									<p class="number" v-if="item.number">{{item.number}}</p>
								</rotate1-animation>
								<rotate2-animation>
									<img
										class="sub"
										v-if="item.number"
										@click.stop.self="handleSubClick(item.id)"
										src="http://kxm.pub/shop/images/sub.png"
										alt
									/>
								</rotate2-animation>
							</span>
						</p>
						<!-- 详情页 -->
						<detail-up>
							<home-detail v-if="item.detail" @closelayerView="getCloselayerView"></home-detail>
						</detail-up>
					</section>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import DetailUp from "../animation/DetailUp";
	import HomeDetail from "./Detail";
	import HomeRating from "./Rating";
	import Rotate1Animation from "../animation/Rotate1";
	import Rotate2Animation from "../animation/Rotate2";
	import FadeAnimation from "../animation/Fade";

	export default {
		name: "HomeProducts",
		props: ["newProducts"],
		data() {
			return {
				showBacklayer: false,
				newProductsDate: []
			};
		},
		mounted() {
			this.getDate();
		},
		watch: {
			newProducts() {
				this.getDate();
			}
		},
		methods: {
			getDate() {
				this.newProductsDate = this.newProducts;
				// console.log(this.newProductsDate)
			},
			handleItemClick(id) {
				//1、将当前的数据传到Detail.vue 2、并修改数据表detail的值为true 3、打开detail页面
				this.newProducts.forEach(item => {
					if (item.id == id) {
						this.$store.commit("setCurrentDetailId", id);
					}
				});
				this.$store.commit("openDetail", id);
				this.showBacklayer = true;
			},
			getCloselayerView(data) {
				this.showBacklayer = data;
			},
			handleAddClick(id) {
				this.$store.commit("addNumber", id);
			},
			handleSubClick(id) {
				this.$store.commit("subNumber", id);
			},
			handleBackLayerClick() {
				this.showBacklayer = false;
			}
		},
		components: {
			HomeDetail,
			DetailUp,
			Rotate1Animation,
			Rotate2Animation,
			HomeRating,
			FadeAnimation
		}
	};
</script>

<style scoped>
	.products {
		padding: 0 5vw 16vw 5vw;
		overflow: hidden;
		margin: 2vw 0;
	}
	.backlayer {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1;
	}
	.products ul {
		width: 100vw;
		overflow: auto;
	}
	.products ul li {
		float: left;
		width: 100vw;
		height: 35vw;
		list-style-type: none;
		margin: 1vw 0;
	}
	.products ul li > img {
		display: block;
		float: left;
		width: 29vw;
	}
	.food-info {
		float: left;
		overflow: hidden;
		width: 62vw;
		margin: 0 4vw;
		text-align: left;
	}
	.food-info p {
		padding: 0.21vw 0;
		float: left;
		width: 56vw;
	}
	.food-title {
		font-weight: bold;
		color: #131313;
		margin-bottom: 0.8vw;
	}
	.food-details {
		overflow: hidden;
		font-size: 3.3vw;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #aaa;
	}
	.food-sales {
		font-size: 3.3vw;
		color: #aaa;
	}
	.food-common {
		display: inline-block;
		width: 43vw !important;
		height: 4.6vw;
		color: rgb(255, 83, 57);
		margin: 1vw 0 0.8vw 0;
		font-size: 3.2vw;
	}
	.food-common-discount {
		width: 9.6vw !important;
		padding: 0 1vw !important;
		border: 0.1vw solid rgb(255, 75, 51, 0.3);
		text-align: center;
	}
	.food-common-tips {
		margin-left: 2vw;
	}
	.food-common-line {
		height: 6vw;
	}
	.sales-info {
		font-size: 4vw;
	}
	.sales-info-ico {
		font-size: 1.6vw;
		color: rgb(255, 83, 57);
	}
	.sales-info-price {
		font-size: 4.5vw;
		color: rgb(255, 83, 57);
	}
	.sales-info-originPrice {
		font-size: 3.6vw;
		text-decoration: line-through;
		margin-left: 1.2vw;
		color: #aaa;
	}
	.detail-food-cart {
		float: right;
		margin-top: -1vw;
		width: 30vw;
		height: 7vw;
	}
	.detail-food-cart .sub {
		float: right;
		right: 17vw;
		margin-right: 2.5vw;
	}
	.detail-food-cart .number {
		float: right;
		width: 6vw;
		height: 6vw;
		text-align: center;
		margin-right: 2.6vw;
		font-size: 5.6vw;
	}
	.detail-food-cart .add {
		float: right;
		right: 4.3vw;
	}
	.detail-food-cart img {
		width: 6.1vw;
	}
</style>
